<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>头条热榜</title>
    <style>
        ul{
            list-style:none;
        }
        ul li{
            margin-bottom: 20px;
        }
        .index{
            font-size: 20px;
            font-weight: bold;
            margin-right: 10px;
        }
        .title{
            margin-right: 10px;
        }
        .hot{
            background:rgb(189, 32, 32);
            color: white;
            font-size: 10px;
            padding: 2px 4px;
        }
        .num-1{
            color: rgb(141, 16, 16);
        }
        .num-2{
            color: orange;
        }
        .num-3{
            color:burlywood
        }
    </style>
</head>
<body>
    <div id="root"></div>

    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
    <script type="text/babel">
        // https://www.toutiao.com/
        let data = [
            {id:1, title: '全网帮全红婵圆梦', is_hot: true, is_new: false},
            {id:2, title: '意外“金”喜！刘诗颖标枪夺冠', is_hot: true, is_new: false},
            {id:3, title: '中国队获乒乓球男团金牌', is_hot: true, is_new: false},
            {id:4, title: '感染护士参加800人婚宴？官方回应', is_hot: false, is_new: false},
            {id:5, title: '中国男子百米接力夺得第4名', is_hot: false, is_new: true},
            {id:6, title: '全红婵夺冠 郭晶晶现场追星', is_hot: true, is_new: false},
            {id:7, title: '全红婵获奖豪宅+商铺+20万现金', is_hot: true, is_new: false},
            {id:8, title: '中国南海军事演习引发海外关注', is_hot: false, is_new: false},
            {id:9, title: '武汉本轮输入性疫情源头查明', is_hot: true, is_new: false},
        ];

        //创建虚拟 DOM 对象
        let vDOM = <div className="container">
                <h2>头条热榜</h2>
                <ul>
                    {
                        data.map(item => {
                            return <li key={item.id} >
                                <span className={`index num-${item.id}`}>{item.id}</span>
                                <span className="title">{item.title}</span>
                                {item.is_hot ? <span className="hot">热</span> : null}     
                            </li>
                        })
                    }
                </ul>
            </div>
        
        ReactDOM.render(vDOM, document.querySelector('#root'));
    </script>
</body>
</html>